<template>
	<view>
		<view class="room-title">
			<text>房间号:{{cname}}
				{{InfoRoom.titleName}}
			</text>
		</view>
		<form @submit="submitR">
			<view class="must-input">
				<view class="version-box">
					<text style="margin:0 24rpx 0 24rpx;"><text class="must-stars">*</text>月度费用配置:</text>
					<text>{{InfoRoom.version}}</text>
				</view>
				<view class="meter-month">
					<text style="margin:0 24rpx 0 24rpx;"><text class="must-stars">*</text>抄表时间:</text>
					<text>{{InfoRoom.meterReadingTime}}</text>
				</view>
				<view class="meter-deadline">
					<text style="margin:0 24rpx 0 24rpx;"><text class="must-stars">*</text>缴费截止时间:</text>
					<text>{{InfoRoom.deadline}}</text>
				</view>
			</view>
			<!-- *********************************************** -->
			<view class="box-input aligncenter">
				<view v-if="InfoRoom.type=='01'" class="domestic-Water-box">
					<view class="img-box aligncenter">
						<image src="/static/image/water@2x.png" mode="aspectFit"></image>
					</view>
					<view class="text-box">
						<text style="color: #109EF8;font-weight:bold">生活用水</text>
						<view class="text-input-box">
							<text>本次读数：</text>
							<text>{{InfoRoom.presentNum}}</text>
						</view>
						<view class="text-input-box">
							<text>应缴费用：</text>
							<text>{{InfoRoom.payFee}} 元</text>
						</view>
					</view>
				</view>
				<view v-if="InfoRoom.type=='02'" class="solar-Water-box">
					<view class="img-box aligncenter">
						<image src="/static/image/water@2x.png" mode="aspectFit"></image>
					</view>
					<view class="text-box">
						<text style="color: #109EF8;font-weight:bold">太阳能用水</text>
						<view class="text-input-box">
							<text>本次读数：</text>
							<text>{{InfoRoom.presentNum}}</text>
						</view>
						<view class="text-input-box">
							<text>本次缴费：</text>
							<text>{{InfoRoom.payFee}}</text>
						</view>
					</view>
				</view>
				<view v-if="InfoRoom.type=='03'" class="ele-box">
					<view class="img-box aligncenter">
						<image src="/static/image/ele@2x.png" mode="aspectFit"></image>
					</view>
					<view class="text-box">
						<text style="color: #109EF8;font-weight:bold">生活用电</text>
						<view class="text-input-box">
							<text>本次读数：</text>
							<text>{{InfoRoom.presentNum}}</text>
						</view>
						<view class="text-input-box">
							<text>本次缴费：</text>
							<text>{{InfoRoom.payFee}}</text>
						</view>
					</view>
				</view>
				<view v-if="InfoRoom.type=='04'" class="gas-box">
					<view class="img-box aligncenter">
						<image src="/static/image/gas@2x.png" mode="aspectFit"></image>
					</view>
					<view class="text-box">
						<text style="color: #109EF8;font-weight:bold">燃气</text>
						<view class="text-input-box">
							<text>本次读数：</text>
							<text>{{InfoRoom.presentNum}}</text>
						</view>
						<view class="text-input-box">
							<text>本次缴费：</text>
							<text>{{InfoRoom.payFee}}</text>
						</view>
					</view>
				</view>
				<view v-if="InfoRoom.type=='05'" class="ele-box">
					<view class="img-box aligncenter">
						<image src="/static/image/bb@2x.png" mode="aspectFit"></image>
					</view>
					<view class="text-box">
						<text style="color: #109EF8;font-weight:bold">宽带费用</text>
						<view class="text-input-box">
							<text>本次读数：</text>
							<text>{{InfoRoom.presentNum}}</text>
						</view>
						<view class="text-input-box">
							<text>本次缴费：</text>
							<text>{{InfoRoom.payFee}}</text>
						</view>
					</view>
				</view>
			</view>
		</form>
		<input type="text" v-model="uNo" name="uniqueNo" style="display: none;" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				InfoRoom: [],
				cname:'',
				payFee:'',
			}
		},
		onLoad(options) {
			// console.log("options", options)
			this.uNo = options.id
			this.cname=options.cname
			this.getInfo(options)
		},
		methods: {
			async getInfo(e) {
				const res = await this
					.$myRequest({
						url: '/api-operate/settlement/' + this.uNo,
						method: 'get'
					})
				this.InfoRoom = res.body.command
				console.log("res", this.InfoRoom)
			}
		}
	}
</script>

<style>
	.room-title {
		font-size: 32rpx;
		color: #6d6e6e;
		font-weight: bold;
		margin: 44rpx 0 28rpx 28rpx;
	}

	.must-input {
		margin-bottom: 20rpx;
		box-shadow: #C5C7CC 2rpx 2rpx;
		font-size: 24rpx;
	}

	.aligncenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.must-stars {
		color: #ff0000;
	}

	.version-box,
	.meter-month,
	.meter-deadline {
		display: flex;
		align-items: center;
		width: 100%;
		height: 76rpx;
		background-color: #FFFFFF;
		position: relative;
		font-size: 26rpx;
		/* border: #007AFF 1px solid; */
	}

	.meter-month::after {
		content: " ";
		margin: 0 auto;
		background-color: #808080;
		width: 706rpx;
		height: 2rpx;
		position: absolute;
		transform: scale(1, 0.2);
		bottom: 0;
		left: 0%;
		right: 0%;
	}

	.meter-month::before {
		content: " ";
		background-color: #808080;
		width: 706rpx;
		height: 2rpx;
		position: absolute;
		transform: scale(1, 0.2);
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#version-picker {
		height: 76rpx;
		overflow: hidden;
	}

	.box-input {
		display: flex;
		flex-direction: column;
	}

	.box-input .domestic-Water-box,
	.solar-Water-box,
	.ele-box,
	.gas-box,
	.bb-box {
		width: 361px;
		height: 65px;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		margin-bottom: 26rpx;

		box-shadow: #C5C7CC 2rpx 2rpx;
	}

	.img-box {
		width: 144rpx;
		height: 102rpx;
		/* background-color: #4CD964; */
		border-right: #DFDFDF 2rpx solid;
		margin-right: 32rpx;
	}

	.img-box image {
		width: 76rpx;
		height: 76rpx;
	}

	.text-input-box {
		display: flex;
		align-items: center;
	}

	.text-box>:first-child {
		/* font-weight: bold; */
	}
</style>
